<template>
	<view class="photo-selector-container">
		<uni-popup ref="photoPopup" type="bottom" :safe-area="false" :mask-click="true">
			<view class="selector-modal">
				<!-- <view class="modal-header">
					<text class="modal-title">选择图片</text>
				</view> -->
				
				<view class="options-list">
					<view class="option-item" @click="selectFromCamera">
						<!-- <view class="option-icon">📷</view> -->
						<text class="option-text">拍照</text>
					</view>
					
					<view class="option-item" @click="selectFromAlbum">
						<!-- <view class="option-icon">🖼️</view> -->
						<text class="option-text">从相册选择</text>
					</view>
				</view>
				
				<view class="cancel-btn" @click="close">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: 'PhotoSelector',
		methods: {
			open() {
				this.$refs.photoPopup.open()
			},
			
			close() {
				this.$refs.photoPopup.close()
			},
			
			selectFromCamera() {
				this.chooseImage('camera')
			},
			
			selectFromAlbum() {
				this.chooseImage('album')
			},
			
			chooseImage(sourceType) {
				const self = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					sourceType: [sourceType],
					success: function(res) {
						const tempFilePath = res.tempFilePaths[0]
						self.close()
						// 触发选择完成事件，传递图片路径
						self.$emit('imageSelected', tempFilePath)
					},
					fail: function(err) {
						console.log('选择图片失败:', err)
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.selector-modal {
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.modal-header {
		padding: 40rpx 0 20rpx;
		text-align: center;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.modal-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}
	
	.options-list {
		padding: 0 40rpx;
	}
	
	.option-item {
		display: flex;
		align-items: center;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background-color: #f8f8f8;
		}
	}
	
	.option-icon {
		font-size: 48rpx;
		margin-right: 30rpx;
	}
	
	.option-text {
		font-size: 32rpx;
		color: #333;
		flex: 1;
	}
	
	.cancel-btn {
		margin: 20rpx 40rpx 40rpx;
		padding: 30rpx;
		text-align: center;
		background-color: #f8f8f8;
		border-radius: 16rpx;
		
		text {
			font-size: 32rpx;
			color: #666;
		}
		
		&:active {
			background-color: #efefef;
		}
	}
</style>
